<!DOCTYPE html>
<html>
<head>
    <#include "/layout/baseHeader.html" />
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/flow-state-config.js"></script>
</head>
<body>
<div id="app">
    <div class="g-dg-search-banner">
        <i-form ref="mySearchForm" :model="searchForm" :rules="ruleValidate" :label-width="80" inline>
            <Form-item label="订单号" prop="id">
                <i-input v-model="searchForm.id"></i-input>
            </Form-item>
            <Form-item label="客户号码" prop="cmMobile">
                <i-input v-model="searchForm.cmMobile"></i-input>
            </Form-item>
            <Form-item label="范围">
                <Date-picker v-model="searchDate" type="daterange" placement="bottom-end"
                             placeholder="日期"></Date-picker>
            </Form-item>
            <i-button type="info" icon="search" @click="reload('mySearchForm')">查询</i-button>
        </i-form>
    </div>
    <div class="g-dg-toolbar">
        <i-button type="success" icon="ios-plus-outline" @click="qryNew">新装宽带</i-button>
        <i-button type="error" icon="social-yen-outline" @click="qryRenewal">宽带续费</i-button>
        <i-button type="primary" icon="ios-cart-outline" @click="qryMove">宽带移机</i-button>
    </div>
    <i-table :data="dtData" :columns="dtCols" :height="getTableHeight" size="small" :highlight-row="true"
             @on-selection-change="onSelRows" @on-current-change="onCurrentChange" stripe  @on-row-dblclick="readDetail"></i-table>
    <div class="g-dg-footbar">
        <div>
            <Page :total="total" :current="page" show-elevator show-sizer show-total placement="top"
                  @on-change="changePage" @on-page-size-change="changePageSize"></Page>
        </div>
    </div>
</div>
<script>
    const m_apis = {
        getList(p_body, p_page = 0, p_pageSize = 0) {
            return PB.apiRoute('/api/flow/kdorderquery/findPageByState?pageNo=' + p_page + '&pageSize=' + p_pageSize, 'GET', p_body);
        },
        getOrder(orderid) {
            return PB.apiRoute('/api/flow/kdorderquery/query?queryChangeModel=1&id=' + orderid, 'GET');
        },
        order_cdqr(id){
            return PB.apiRoute('/api/flow/kdorder/doOrderAction?order.id=' + id +'&log.orderId='+ id + '&log.logOperStep=OP_ZUOFEI_QR' + '&log.operRole=KD_YYY', 'GET');
        }
    };
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                apis:m_apis,
                title: '工单列表',
                page: 1,
                pageSize: 10,
                searchForm: {
                    plevel : 0,
                    statetype:'XD_ALL',
                    orderby:'crtTime desc',
                    queryChangeModel:1
                },
                searchDate: ['', ''],
                ruleValidate: {
                    /*cmMobile: [
                        {required: true, message: '请输入客户号码查询', trigger: 'blur'}
                    ]*/
                },
                total: 0,
                dtData: [],
                dtCols: [
                 /*   {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },*/
                    {
                        title: '订单号',
                        key: 'id'
                    },
                    {
                        title: '下单人',
                        key: 'crtUsername'
                    },

                    {
                        title: '下单时间',
                        key: 'crtTime'
                    },

                    {
                        title: '客户号码',
                        key: 'cmMobile'
                    },
                    {
                        title: '客户姓名',
                        key: 'cmName'
                    },
                    {
                        title: '归属网格',
                        key: 'crtAddressWg'
                    },
                    {
                        title: '业务类型',
                        key: 'crtBizType'
                    },
                    {
                        title: '收费金额',
                        key: 'bsFee',
                        render: (h, params) => {
                            return params.row.bsFee / 100.00;
                        }
                    },
                    {
                        title: '工单状态',
                        key: 'state'
                    },

                    {
                        title: '操作',
                        width: 150,
                        render: (h, params) => {
                            var ck = h("i-button", {
                                props: {
                                    type: "primary",
                                    size: "small"
                                },
                                on: {
                                    click: () => {
                                        //使用this会报错，不知道什么问题。
                                        vm.readDetail(vm.dtData[params.index]);
                                    }
                                }
                            }, "查看")
                            var td = h("i-button", {
                                props: {
                                    type: "error",
                                    size: "small"
                                },
                                style: {
                                    margin:'3px'
                                },
                                on: {
                                    click: () => {
                                        //使用this会报错，不知道什么问题。
                                        vm.refundOrder(vm.dtData[params.index]);
                                    }
                                }
                            }, "退单")
                            var xg = h("i-button", {
                                props: {
                                    type: "primary",
                                    size: "small"
                                },
                                style: {
                                    margin:'3px'
                                },
                                on: {
                                    click: () => {
                                        //使用this会报错，不知道什么问题。
                                        vm.xgOrder(vm.dtData[params.index]);
                                    }
                                }
                            }, "修改")
                            var xy = h("i-button", {
                                props: {
                                    type: "info",
                                    size: "small"
                                },
                                style: {
                                    margin:'3px'
                                },
                                on: {
                                    click: () => {
                                        //使用this会报错，不知道什么问题。
                                        vm.signView(vm.dtData[params.index]);
                                    }
                                }
                            }, "协议")
                            var cdqr = h("i-button", {
                                props: {
                                    type: "error",
                                    size: "small"
                                },
                                style: {
                                    margin:'3px'
                                },
                                on: {
                                    click: () => {
                                        //使用this会报错，不知道什么问题。
                                        vm.order_cdqr(vm.dtData[params.index]);
                                    }
                                }
                            }, "撤单确认")



                            if(params.row.state == "STATE_QIANSHOU" || params.row.state==FLOWCFG.queryName('STATE_QIANSHOU')||
                                params.row.state == "STATE_XD_XG" || params.row.state==FLOWCFG.queryName('STATE_XD_XG')||
                                params.row.state == "STATE_HT_XG" || params.row.state==FLOWCFG.queryName('STATE_HT_XG')
                            ){
                                return h('div', [
                                    xg,td,xy
                                ]);
                            }else  if(params.row.state == "STATE_ZUOFEI_QR" || params.row.state==FLOWCFG.queryName('STATE_ZUOFEI_QR')){
                                return h('div', [
                                    cdqr,xy
                                ]);
                            }else{
                                return h('div', [
                                    xy
                                ]);
                            }
                        }
                    }
                ],
                currentRow: null,
                selRows: null
            }
        },
        created(){
          this.loadData();
        },
        computed: {
            getTableHeight(){
                return (window.innerHeight - 150);
            }
        },
        methods: {
            loadData () {
                let that = this
                if(this.searchDate!=null && this.searchDate.length != 0){
                    this.searchForm.crtTimeStart = this.searchDate[0] ? this.searchDate[0].pattern('yyyy-MM-dd HH:mm:ss') : '';
                    this.searchForm.crtTimeEnd = this.searchDate[1] ? this.searchDate[1].pattern('yyyy-MM-dd HH:mm:ss') : '';
                }
                PB.ajax(this.apis.getList(this.searchForm,this.page,this.pageSize), function (d) {
                    that.dtData = d.data;
                    that.total = d.total;
                });
            },
            onSelRows(selection){
                this.selRows = selection;
            },
            reload(name){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.page = 1;
                        this.loadData();
                    } else {
                        this.$Message.error('查询失败！');
                    }
                })
            },
            reloadObj (id) {
                let that = this;
                PB.ajax(that.apis.getOrder(id), function (d) {
                    that.dtData.forEach((q,i)=>{
                        if(q.id==d.data.id){
                            q.userNameFP = d.data.userNameFP;
                            q.userIdFP= d.data.userIdFP;
                            q.state = d.data.state;
                            q.ngState= d.data.ngState;
                            q.ngBackState= d.data.ngBackState;
                            q.payState= d.data.payState;
                            q.payBackState= d.data.payBackState;
                        }
                    })
                });
            },
            onCurrentChange(currentRow, oldCurrentRow){
                this.currentRow = currentRow;
            },
            changePage (e) {
                this.page = e;
                this.loadData();
            },
            changePageSize(e){
                this.page = 1;
                this.pageSize = e;
                this.loadData();
            },
            qryNew() {
                parent.PB.showFormPage('flow/kdorder/kdorder_new', "新装宽带", {showFooter: false});
            },
            qryRenewal() {
                parent.PB.showFormPage('flow/kdorder/kdorder_renewal', "宽带续费", {showFooter: false});
            },
            qryMove() {
                parent.PB.showFormPage('flow/kdorder/kdorder_move', "宽带移机", {showFooter: false});
            },
            xgOrder(row) {
                if ("NEW" == row.crtBizType || "新装宽带" == row.crtBizType) {
                    parent.PB.showFormPage('flow/kdorder/kdorder_new_edit?id='+ row.id, "工单信息修改", {showFooter: false});
                } else if ("CONTINUE" == row.crtBizType || "宽带续费" == row.crtBizType) {
                    parent.PB.showFormPage('flow/kdorder/kdorder_renewal_edit?id='+ row.id, "工单信息修改", {showFooter: false});
                } else if ("REMOVE" == row.crtBizType || "宽带移机" == row.crtBizType) {
                    parent.PB.showFormPage('flow/kdorder/kdorder_move_edit?id='+ row.id, "工单信息修改", {showFooter: false});
                }
            },
            readDetail(row){
                parent.PB.showFormPage('flow/kdorderInstall/order_info_detail?role=KD_YYY&id='+ row.id, "工单详情", {showFooter: false});
            },
            signView(row){
                window.open('/api/pay/alipay/receipt?tid='+ row.uuid +'&t='+new Date().getTime());
            },
            order_cdqr(row){
                PB.confirm('确定对当前订单进行撤单么？', function () {
                    PB.ajax(vm.apis.order_cdqr(row.id), function (d) {
                        vm.reloadObj(row.id);
                    })
                })
            },
            refundOrder(row) {
                this.$Modal.confirm({
                    title: "提示",
                    content: "是否退单？",
                    okText: "确定",
                    cancelText: "取消",
                    loading: true,  //非异步关闭，loading属性不用写
                    onOk: function() {
                        let _self = this;

                        $.ajax({
                            type : "POST",
                            url : "/api/flow/kdorder/doOrderAction",
                            dataType : "json",  //返回 JSON 数据
                            cache : false,  //不缓存
                            async : true,
                            timeout : 60000,
                            data : {
                                'order.id': row.id,
                                'log.operRole': "KD_YYY",
                                'log.logOperStep': "OP_XD_HT",
                                'log.logOperStepInfo': "下单人回退",
                                'log.orderId': row.id
                            },
                            success : function(data, textStatus) {
                                _self.$Modal.remove();  //移除弹窗
                                if(data.success == true || data.success == "true") {
                                    _self.$Modal.success({
                                        title: "通知",
                                        'mask-closable' : false,
                                        content: data.msg
                                    });
                                    vm.loadData();  //刷新报表
                                } else {
                                    _self.$Modal.error({
                                        title: "通知",
                                        'mask-closable' : false,
                                        content: data.msg
                                    });
                                }
                            },
                            error : function(XMLHttpRequest, textStatus, errorThrown) {
                                //_self.$Modal.loading = false;这样是无效的，只能移除窗口
                                _self.$Modal.remove();  //移除弹窗
                                _self.$Modal.error({
                                    title: "通知",
                                    'mask-closable' : false,
                                    content: "操作失败！"
                                });
                            }
                        });
                    },
                    onCancel: function() {
                        this.$Message.info("取消");
                    }
                });
            }
        }
    })

    function saveOK() {
        vm.reload();
    }
</script>
</body>
</html>
